<template>
	<view class="addnew">
		<view class="nav">
			<view class="navitem" :style="{height:navHeight+'px'}">
			</view>
			<view class="title" :style="{height:titleHeight+'px'}">
				<view class="tit-top">
					<uni-nav-bar @clickLeft="leftClick" background-color="#00acbd" color="#ffffff" :border="false"
						left-icon="back" title="新增乘客"></uni-nav-bar>
				</view>
				<view class="tit-bot">
					<view class="left">
						<image src="../../static/User 60.png" mode=""></image>
						<text>138012345678</text>
					</view>
					<view class="right">
						<text>切换账号</text>
						<uni-icons type="right" size="18" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button><uni-icons color="#00acbd" type="camera" size="25"></uni-icons><text>扫描证件添加</text></button>
			<!-- <u-button type="primary" icon="camera" :plain="true" text="扫描证件添加" :hairline="false"></u-button> -->
		</view>
		<view class="center">
			<view class="center-top" @click="show = true">
				<view class="center-item">
					<text class="left">
						乘客类型
					</text>
					<text class="right">
						{{vote}}
					</text>
				</view>
				<uni-icons type="right" size="20" class="right">
				</uni-icons>
			</view>
			<view class="center-top-bot">
				<view class="center-item">
					<text class="left">
						姓名
					</text>
					<uni-icons type="info" size="20" color="#aaa"></uni-icons>
				</view>
				<input type="text" placeholder="与乘客证件姓名一致">
			</view>
			<view class="center-top" @click="shows = true">
				<view class="center-item">
					<text class="left">
						证件类型
					</text>
					<text class="right">
						{{document}}
					</text>
				</view>
				<uni-icons type="right" size="20" class="right">
				</uni-icons>
			</view>
			<view class="center-top-num">
				<view class="center-item">
					<text class="left">
						证件号码
					</text>
				</view>
				<input type="text" placeholder="与乘客证件号码一致">
			</view>
			<view class="center-top-num">
				<view class="center-item">
					<text class="left">
						手机号码
					</text>
				</view>
				<input type="text" placeholder="请准确填写手机号">
			</view>
			<view class="center-top-text">
				<view class="center-item">
					为配合疫情防控工作，需提供每名乘客的
					<text class="left">
						本人手机号，
					</text>
					老人或无手机号的乘客，可填写亲友手机号
				</view>
			</view>
		</view>
		<view class="buyvote">
			本次购票服务由八位票为提供
		</view>
		<view class="bottom">
			<u-button type="primary" shape="circle" text="确定"></u-button>
		</view>
		<!-- 切换票 -->
		<u-popup :show="show" :round="10" @close="close" @open="open">
			<view v-for="(item,index) in array" :key="index" class="vote" @click="closevote(item)">
				<text>{{item}}</text>
			</view>
			<!-- <view class="vote" @click="closevote">
				<text>学生票</text>
			</view>
			<view class="vote" @click="closevote">
				<text>儿童票</text>
			</view> -->
			<view class="cancellation" @click="closes">
				<text>取消</text>
			</view>
		</u-popup>
		<!-- 切换证件 -->
		<u-popup :show="shows" :round="10" @close="closes" @open="opens">
			<view v-for="(item,index) in docuarray" :key="index" class="vote" @click="closedoc(item)">
				<text>{{item}}</text>
			</view>
			<view class="cancellation" @click="closes">
				<text>取消</text>
			</view>
		</u-popup>
		<!-- <u-button @click="show = true">打开</u-button> -->
		<!-- <picker @change="bindPickerChange" :value="index" :range="array">
			<view class="picker">
				当前选择：{{array[index]}}
			</view>
		</picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navHeight: 50,
				titleHeight: 50,
				show: false,
				index: 0,
				array: ['成人票', '学生票', '儿童票'],
				vote: '成人票',
				shows: false,
				docuarray: ['身份证', '军人证', '护照'],
				document: '身份证'
			}
		},
		onLoad() {
			this.getmenu()
		},
		methods: {
			// bindPickerChange(e) {
			// 	console.log(e)
			// 	this.index = e.detail.value
			// },
			// 点击关闭
			closedoc(e) {
				this.shows = false
				// 点击字段赋值
				this.document = e
			},
			// 点击取消并关闭折层
			closes() {
				this.show = false
			},
			opens() {
				// console.log('open');
			},
			closes() {
				this.shows = false
				// console.log('close');
			},
			// 点击关闭
			closevote(e) {
				this.show = false
				// 点击字段赋值
				this.vote = e
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
				uni.navigateBack()
			},
			// 获取 绛囊按钮位置
			getmenu() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.navHeight = menuButtonInfo.top + 10
				this.titleHeight = menuButtonInfo.height + 70
				console.log(menuButtonInfo);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addnew {
		height: 100vh;
		background-color: #eee;

		.nav {
			background-color: #00acbd;

			.tit-bot {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #fff;
						margin-right: 20rpx;
					}

					text {
						display: inline-block;
						color: #fff;
					}
				}

				.right {
					text {
						color: #fff;
					}
				}
			}
		}

		.btn {
			width: 97%;
			margin: 0 auto;
			margin-top: 10rpx;

			button {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #00acbd;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.center {
			width: 92%;
			// height: 400rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 20rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.center-top {
				width: 95%;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px #ddd solid;

				.center-item {
					text {
						display: inline-block;
					}

					.left {}

					.right {
						margin-left: 20rpx;
						font-weight: 700;
						font-size: 32rpx;
					}
				}
			}

			.center-top-bot {
				width: 95%;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				border-bottom: 1px #ddd solid;

				.center-item {
					height: 40rpx;
					line-height: 40rpx;
					text {
						margin-right: 5rpx;
					}
				}

				input {
					margin-left: 50rpx;
				}

			}

			.center-top-num {
				width: 95%;
				padding: 20rpx 0;
				display: flex;
				// justify-content: space-between;
				border-bottom: 1px #ddd solid;

				input {
					margin-left: 20rpx;
				}
			}

			.center-top-text {
				padding: 40rpx 20rpx 20rpx 20rpx;
				font-size: 22rpx;
				color: #808080;

				text {
					color: #f00;
				}
			}
		}

		.buyvote {
			height: 150rpx;
			line-height: 150rpx;
			padding-bottom: 100rpx;
			text-align: center;
			font-size: 22rpx;
			color: #808080;
		}

		.bottom {
			padding: 20rpx;
		}

		.vote {
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px #ccc solid;
		}

		.cancellation {
			// margin-top: 20rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			padding-bottom: 20rpx;
		}
	}
</style>